<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>metadata</title>
    <script src="/vue.js"></script>
    <script src="/vue-resource.js"></script>
    <script type="text/x-template" id="application-template">
        <li>
            {{applicationName}}
            <ul>
                <instance v-for="instance in instanceList" :key="instance.instanceId"
                          :application-name="applicationName" :instance-id="instance.instanceId"
                          :metadata="instance.metadata"/>
            </ul>
        </li>
    </script>

    <script type="text/x-template" id="instance-template">
        <li>
            {{instanceId}}
            <ul>
                metadata:
                <li v-for="(value, key) in metadata" :key="key">
                    {{key}}: {{value}}
                </li>
                {{metadataKey}}:{{metadataValue}} <br/>
                <select v-model="metadataKey">
                    <option>weight</option>
                    <option>labelOr</option>
                    <option>labelAnd</option>
                </select>:<input v-model="metadataValue"/>
                <button @click="putMetadata">PUT</button>
            </ul>
        </li>
    </script>
</head>
<body>
<div id="app">
    <ul id="applications">
        <application v-for="application in applicationList" :key="application.name"
                     :application-name="application.name" :instance-list="application.instance"/>
    </ul>
</div>

<script type="text/javascript">
    Vue.component('application', {
        template: '#application-template',
        props: {applicationName: String, instanceList: Array}
    });
    Vue.component('instance', {
        template: '#instance-template',
        data: function () {
            return {metadataKey: 'weight', metadataValue: ''};
        },
        props: {applicationName: String, instanceId: String, metadata: Object},
        methods: {
            putMetadata: function () {
                var url = '/eureka/apps/' + this.applicationName + '/' + this.instanceId
                        + '/metadata?' + this.metadataKey + '=' + this.metadataValue;
                this.$http.put(url).then(
                        function (response) {
                            console.info(response);
                            alert('success, please refresh page.');
                        }, function (response) {
                            console.info(response);
                        });
            }
        }
    });
    new Vue({
        el: '#app',
        data: {applicationList: []},
        mounted: function () {
            this.$http.get('/eureka/apps').then(function (response) {
                console.info(response.body.applications);
                this.$data.applicationList = response.body.applications.application;
            }, function (response) {
                console.info(response);
            });
        }
    });
</script>
</body>
</html>